//
//  BackgroundAndOverlayBootcamp.swift
//  FCSwiftUI
//
//  Created by 冯宣超 on 2023/2/19.
//

import SwiftUI

struct BackgroundAndOverlayBootcamp: View {
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
            .frame(width: 100, height: 100, alignment: .center)
            .background {
                //闭包内可以是一切可显示的物体(View):颜色、渐变色、图形
//                Color.red
//                LinearGradient(colors: [.red, .blue], startPoint: .topLeading, endPoint: .bottomTrailing)
                Circle()
                    .fill(Color.blue)
            }
            .frame(width: 150, height: 150, alignment: .center)
            .background {
                Circle()
                    .fill(Color.red)
            }
        
        Text("图层堆叠")
            .background {
                Circle()
                    .fill(LinearGradient(colors: [.red, .blue], startPoint: .leading, endPoint: .trailing))
                    .frame(width: 100, height: 100, alignment: .center)
            }
            .background {
                Circle()
                    .fill(LinearGradient(colors: [.blue, .red], startPoint: .leading, endPoint: .trailing))
                    .frame(width: 150, height: 150, alignment: .center)
            }
        
        Circle()
            .fill(Color.pink)
            .frame(width: 120, height: 120, alignment: .center)
            .overlay {
                Text("1")
                    .font(.largeTitle)
                    .foregroundColor(.white)
            }
            .background {
                Circle()
                    .fill(Color.purple)
                    .frame(width: 150, height: 150, alignment: .center)
            }
        
        Rectangle()
            .frame(width: 100, height: 100)
            .overlay(alignment: .topLeading) {
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 50, height: 50)
            }
            .background(alignment: .topLeading) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 150, height: 150)
            }
        
        Image(systemName: "heart.fill")
            .font(.system(size: 40))
            .foregroundColor(.white)
            .background {
                Circle()
                    .fill(LinearGradient(colors: [.red, .blue], startPoint: .topLeading, endPoint: .bottomTrailing))
                    .frame(width: 100, height: 100)
                    .shadow(color: .black.opacity(0.5), radius: 10, x: 0.0, y: 10)
                    .overlay(alignment: .bottomTrailing) {
                        Circle()
                            .fill(Color.blue)
                            .frame(width: 35, height: 35)
                            .overlay {
                                Text("5")
                                    .font(.headline)
                                    .foregroundColor(.white)
                            }
                            .shadow(color: .black.opacity(0.5), radius: 10, x: 0.0, y: 10)
                    }
            }
        
        
            
    }
}

struct BackgroundAndOverlayBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        BackgroundAndOverlayBootcamp()
    }
}
